<template>
  <div>
    ds {{ $attrs.foo }}{{ $props.val }}
    <button @click="but">加一</button>
    <slot name="sex" :data="obj"></slot>
    <el-form :rules="rules" ref="form" :model="form">
      <el-form-item prop="number">
        <el-input v-model.trim="form.number"></el-input>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  methods: {
    but() {
      let foo = this.$attrs.foo + 1;
      let val = this.$props.val + 1;
      /** 显示的改变父组件的参数
       *  <asyc :foo.sync="foo" :val="val" @update:val="(va)=>{val =va}"></asyc>
       * this.$emit("update:foo",foo)
       * this.$emit("update:val",val)
       */
      this.$emit("update:foo", foo);
      this.$emit("update:val", val);
    },
  },
  data() {
    var validatePass2 = (rule, value, callback) => {
      console.log(rule, value, callback);
      let re = /^[0-9][0-9]*([\.][0-9]+)?$/; // [0-9]+ 几位小数
      if (value === "") {
        callback(new Error("不能为空"));
      } else if (!re.test(value)) {
        callback(new Error("小数格式不符合规范"));
      } else if (Number.isNaN(value - 0)) {
        callback(new Error("请输入数字"));
      } else if (value - 0 > 1) {
        callback(new Error("不能大于1"));
      } else if (value - 0 < 0) {
        callback(new Error("不能小于0"));
      } else if (value.split(".")[1].length > 1) {
        // callback(new Error("只能有一位小数"));
        console.log(this);
        // this.form.number = Number(value).toFixed(1) + "";
      } else {
        callback();
      }
    };
    return {
      obj: { name: "liu", age: "12" },
      form: {
        number: 1,
      },
      rules: {
        number: [
          {
            required: true,
            validator: validatePass2,
            trigger: "blur",
          },
        ],
      },
    };
  },
  props: {
    val: {
      type: Number,
    },
  },
  mounted() {
    console.log(this.$listeners, "bind");
  },
};
</script>

<style></style>
